<template>
  <div class="app-container">
    <!--搜索输入区-->
    <el-form :inline="true" class="queryForm" ref="queryForm" v-show="showSearch">
      <FormItem v-for="(item,index) in fieldInfo"
                :itemInfo="item" :index="index" :key="index" itemType="query"
                @ItemValChange="ItemValChange"></FormItem>
    </el-form>
    <!--按钮操作区-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="strIsNotEmpty(modeConfig.ysdAddApi)">
        <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="[modeConfig.perms+':add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5" v-if="strIsNotEmpty(modeConfig.ysdUpdateApi)">
        <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="[modeConfig.perms+':edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5" v-if="strIsNotEmpty(modeConfig.ysdDeleteApi)">
        <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="[modeConfig.perms+':remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5" v-if="strIsNotEmpty(modeConfig.ysdImportApi)">
        <el-button
            type="info"
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
            v-hasPermi="[modeConfig.perms+':import']"
        >导入
        </el-button>
      </el-col>
      <el-col :span="1.5" v-if="strIsNotEmpty(modeConfig.ysdExportApi)">
        <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="[modeConfig.perms+':export']"
        >导出</el-button>
      </el-col>
      <!--右侧查询按钮-->
      <right-toolbar :showSearch.sync="showSearch"
                     stype="V1"
                     :tabGenId="tabGenId"
                     @handleQuery="handleQuery"
                     @resetQuery="resetQuery"
                     @queryTable="getList"
                     @changeModeConfig="changeModeConfig"/>
    </el-row>
    <!--列表区-->
    <el-table v-loading="loading" :ref="tableRef" :height="table.tabHeight" border :data="tableData"
              @selection-change="handleSelectionChange">
      <el-table-column show-overflow-tooltip type="selection" width="55" align="center"/>
      <!--遍历需要显示的字段-->
      <el-table-column show-overflow-tooltip v-for="(item,index) in listShowColumnFilter" :key="index" :label="item.columnComment"
                       :min-width="item.columnWidth"
                       :align="item.columnAlign"
                       :prop="item.columnName">
        <template slot-scope="scope">
          <span>{{ translatorFormatter(scope.row, item) }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <el-button
              v-if="strIsNotEmpty(modeConfig.ysdUpdateApi)"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="[modeConfig.perms+':edit']"
          >修改
          </el-button>
          <el-button
              v-if="strIsNotEmpty(modeConfig.ysdDeleteApi)"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="[modeConfig.perms+':remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="table.total>0"
                :total="table.total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
    <!-- 表单对话框 -->
    <el-dialog :title="title" v-if="open" :visible.sync="open"
               class="addendum-dialog"
               v-dialog-drag="{'width':modeConfig.formWidth,'height':modeConfig.formHeight}"
               :close-on-click-modal="false"
               :destroy-on-close="true"
               :fullscreen="modeConfig.formWidth>0?false:true"
               @close="cancel" >
        <Edit v-if="open"
            :fieldInfo="fieldInfo"
            :defPk="updateId"
            :visitConfig="visitConfig"
            :formBuildKey="formBuildKey"
            @cancel="cancel"/>
      </el-dialog>
    <!-- Excel导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body>
      <div style="width:100%;text-align: center">
        <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！
            <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
          </div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex; flex-direction: row; justify-content: center;">
        <template v-if="upload.isUploading">
          <el-alert type="warning" :closable="false">
            <span><i class="el-icon-loading"/>数据导入处理中，请稍等...</span>
          </el-alert>
        </template>
        <template v-else>
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </template>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { TableMixins } from "@/views/youshuda/mixins/TableMixins";
  export default {
    name: "BaseModeCRUD",
    mixins: [TableMixins],
    methods: {},
  };
</script>

<style lang="scss" scoped>

  .el-icon-loading{
    margin-right: 10px;
  }

</style>
